<template>
  <div class="charts-box">
    <el-select v-model="dataShip" clearable multiple collapse-tags collapse-tags-tooltip placeholder="请选择船舶">
      <el-option v-for="(item, index) in dataShipColumns" :key="index" :label="item.deptName" :value="item.boxId">
      </el-option>
    </el-select>
    <el-select clearable style="margin-left: 20px" v-model="dataType" placeholder="请选择告警类型">
      <el-option v-for="(item, index) in dataTypeColumns" :key="index" :label="item.label" :value="item.value">
      </el-option>
    </el-select>

    <el-select clearable style="margin-left: 20px" v-model="typeCharts" placeholder="请选择图表类型">
      <el-option label="柱状图" value="column" />
      <el-option label="折线图" value="line" />
    </el-select>

    <el-date-picker v-model="dataTime" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
      start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :clearable="false"
      style="width: 376px; margin-left: 20px;" />

    <el-button type="primary" @click="getChartMessage" style="margin-left: 20px">查询</el-button>
  </div>
</template>

<script>
  import qiunVueUcharts from "@qiun/vue-ucharts";
  export default {
    props: {
      dataShipColumns: {
        type: Array,
        default: () => []
      },
      dataTypeColumns: {
        type: Array,
        default: () => []
      },
    },
    data() {
      return {
        dataShip: '',
        dataType: '',
        dataTime: '',
        typeCharts: 'line',
        dataTypeColumns: [],
        pickerOptions: {
          shortcuts: [
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一年",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
      }
    },
    mounted() {
      // this.getCompanyShips();
    },
    methods: {
      // 获取船舶列表
      getCompanyShips() {
        const that = this;
        that
          .$axios({
            method: "get",
            url: `/api/department/dept/ships`,
            params: {
              page: 1,
              count: 9999,
              kinds: 1,
            },
          })
          .then((res) => {
            if (res.data.code == 0) {
              that.dataShipColumns = [{
                boxId: "",
                deptName: "全部",
              }, ...res.data.data.list];
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
      // 查询按钮点击事件
      getChartMessage() {
        this.$emit('query', {
          dataShip: this.dataShip,
          dataType: this.dataType,
          dataTime: this.dataTime,
          typeCharts: this.typeCharts,
        });
      }
    },
  };
</script>

<style scoped>
  .charts-box {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    min-height: 80px;
  }
</style>
